<template>
  <div>
    <div class="evo">
      <div class="e-header">
        <div class="e-h-row">
          <div class="fresh">
            <n-button round strong secondary type="info" size="small" @click="flushData">
              <i class="iconfont icon-htmal5icon23"></i>刷新
            </n-button>
          </div>
          <div class="state">
            <n-popselect v-model:value="currentStatus" :options="options" trigger="click">
              <n-button size="small" round>{{ currentStatus }}</n-button>
            </n-popselect>
          </div>
          <div class="e-h-search">
            <div class="search">
              <n-input class="search-input" placeholder="搜索题目ID" round size="small" v-model:value="searchParams.pid">
                <template #suffix>
                  <i class="iconfont icon-sousuo" @click="getRaceEvoluation()"></i>
                </template>
              </n-input>
            </div>
            <div class="search">
              <n-input class="search-input" placeholder="搜索作者" round size="small" v-model:value="searchParams.username">
                <template #suffix>
                  <i class="iconfont icon-sousuo" @click="getRaceEvoluation()"></i>
                </template>
              </n-input>
            </div>
          </div>
        </div>
      </div>
      <div class="e-body">
        <el-table class="table" :data="raceEvoluation.records" size="small" :row-class-name="getClassName"
          @row-click="handlerToProblem">
          <el-table-column type="index" label="序号" width="100%" align="center" :index="indexMethod" />
          <el-table-column prop="displayPid" label="题目ID">
            <template #default="scoped">
              <!-- <div @click="hanlderToProblem(scoped.row.pid)">{{ scoped.row.displayPid }}</div> -->
              {{ scoped.row.displayPid }}
            </template>
          </el-table-column>
          <!-- <el-table-column label="题目" align="center">
            <template #default="scoped">
              <div class="table-pid">
                {{ scoped.row.pid || "--" }}
              </div>
            </template>
          </el-table-column> -->
          <el-table-column prop="status" label="状态" align="center" min-width="130px">
            <template #default="scoped">
              <n-tag type="error" strong v-show="scoped.row.status === -1" round size="small">
                UnAccepted
                <template #icon>
                  <i class="iconfont icon-chahao"></i>
                </template>
              </n-tag>
              <n-tag type="success" strong v-show="scoped.row.status === 0" round size="small">
                Accepted
                <template #icon> <i class="iconfont icon-ai53"></i> </template></n-tag>
              <n-tag type="info" strong v-show="scoped.row.status === 1" round size="small">
                Partial Accepted
                <template #icon>
                  <i class="iconfont icon-jinggao"></i> </template></n-tag>
              <n-tag type="error" strong v-show="scoped.row.status === 2" round size="small">
                Time Limit Exceeded
                <template #icon>
                  <i class="iconfont icon-dengluchaoshi"></i>
                </template>
              </n-tag>
              <n-tag type="error" strong v-show="scoped.row.status === 3" round size="small">
                Memory Limit Exceeded
                <template #icon> <i class="iconfont icon-chahao"></i> </template></n-tag>
              <n-tag type="error" strong v-show="scoped.row.status === 4" round size="small">
                Runtime Error
                <template #icon> <i class="iconfont icon-chahao"></i> </template></n-tag>
              <n-tag type="" strong v-show="scoped.row.status === 5" round size="small">
                System Error
                <template #icon> <i class="iconfont icon-chahao"></i> </template></n-tag>
              <n-tag type="warning" strong v-show="scoped.row.status === 6" round size="small">
                Compile Error
                <template #icon> <i class="iconfont icon-chahao"></i> </template></n-tag>
              <n-tag type="error" strong v-show="scoped.row.status === 7" round size="small">
                Wrong Answer
                <template #icon> <i class="iconfont icon-chahao"></i> </template></n-tag>
              <n-tag type="warning" strong v-show="scoped.row.status === 8" round size="small">
                Presentation Error
                <template #icon> <i class="iconfont icon-chahao"></i> </template></n-tag>
              <n-tag type="error" strong v-show="scoped.row.status === 9" round size="small">
                Submit Failed
                <template #icon> <i class="iconfont icon-chahao"></i> </template></n-tag>
              <n-tag type="info" strong v-show="scoped.row.status === 11" round size="small">
                Submitting
                <template #icon>
                  <i class="iconfont icon-dengluchaoshi"></i> </template></n-tag>
              <n-tag type="success" strong v-show="scoped.row.status === 12" round size="small">
                Compiling
                <template #icon>
                  <i class="iconfont icon-dengluchaoshi"></i> </template></n-tag>
              <n-tag type="info" strong v-show="scoped.row.status === 13" round size="small">
                Judging
                <template #icon>
                  <i class="iconfont icon-dengluchaoshi"></i>
                </template>
              </n-tag>
            </template>
          </el-table-column>
          <el-table-column prop="score" label="分数" align="center">
            <template #default="scoped">
              {{ scoped.row.score || "--" }}
            </template>
          </el-table-column>
          <el-table-column prop="time" label="运行时间" align="center">
            <template #default="scoped">
              {{ scoped.row.time || "0" }}ms
            </template>
          </el-table-column>
          <el-table-column prop="memory" label="运行内存" align="center">
            <template #default="scoped">
              {{ getmemory(scoped.row.memory, 0) }}
            </template>
          </el-table-column>
          <el-table-column prop="length" label="代码长度" align="center">
            <template #default="scoped">
              {{ scoped.row.length || "--" }}B
            </template>
          </el-table-column>
          <el-table-column prop="language" label="语言" align="center">
            <template #default="scoped">
              <div class="table-pid" @click="handlerToProblem(scoped.row)">
                {{ scoped.row.language || "--" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="judger" label="判题源" align="center">
            <template #default="scoped">
              {{ scoped.row.judger || "--" }}
            </template>
          </el-table-column>
          <el-table-column prop="username" label="作者" align="center"></el-table-column>
          <el-table-column prop="submitTime" label="提交时间" align="center">
            <template #default="scoped">
              <el-tooltip :content="scoped.row.submitTime" placement="top">
                <div style="cursor: pointer;">{{ getDay(scoped.row.submitTime) || "--" }}</div>
              </el-tooltip>
            </template>
          </el-table-column>
          <!-- <el-table-column label="重新评测" align="center" v-if="$store.oj.isLogin && $store.oj.userData.authLevel === 2">
          <template #default="scoped">
            <n-button size="tiny" type="info" strong secondary @click="reSubmit(scoped.row.submitId)">
              <transition>
                <i class="iconfont icon-jiazai loading-icon" v-show="scoped.row.submitId === submitId"></i>
              </transition>
              重新测评
            </n-button>
          </template>
        </el-table-column> -->
        </el-table>
      </div>
      <div class="e-footer">
        <el-pagination class="pagination" :page-sizes="[20, 50, 100]" background small layout="prev, pager, next,sizes"
          :total="Number(raceEvoluation.total)" v-model:current-page="searchParams.pageNum"
          v-model:page-size="searchParams.pageSize" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { debounce } from "@/utils/global.js"
import { getRaceEvoluationAPI } from "@/api/ojAPI/ojAPI"
import { useRoute } from "vue-router"
import { onMounted, reactive, ref, watch } from "vue"
import { useRouter } from "vue-router"
import { wordsToStatus } from "@/utils/global.js"
const router = useRouter()
const route = useRoute()
const arr = ["B", "KB", "MB", "GB"]
onMounted(() => {
  getRaceEvoluation()
  if (route.query.submitId) {
    currentSubmitId.value = route.query.submitId
  }
})
const raceEvoluation = ref({
  records: [],
  total: 10,
})
const hanlderToProblem = (id) => {
  router.push(`/home/racePage/${route.params.rid}/problem/${id}?proId=41`)
}
const searchParams = reactive({
  pageSize: 20,
  pageNum: 1,
  cid: route.params.rid,
  status: 15,
  pid: "",
  username: "",
})
watch(searchParams, () => {
  getRaceEvoluation()
})
const getRaceEvoluation = debounce(async () => {
  if (!searchParams.cid) {
    router.push("/home/race")
  }
  await getRaceEvoluationAPI(searchParams)
    .then((res) => {
      if (res.data.code === 200) {
        raceEvoluation.value = res.data.data
      }
    })
    .catch((err) => {
      console.log(err)
    })
}, 100)
const getClassName = (data) => {
  const { row } = data
  if (row.status == 0 || row.status == 12) {
    return "success-row"
  } else if (row.status == 1 || row.status == 11 || row.status == 12) {
    return "info-row"
  } else if (row.status == 6 || row.status == 8) {
    return "warning-row"
  } else if (row.status == 5) {
    return "grey-row"
  }
  return "error-row"
}
const indexMethod = (index) => {
  return (searchParams.pageNum - 1) * searchParams.pageSize + index + 1
}
const getDay = (time) => {
  if (!time) {
    return "--"
  }
  const now = Date.now()
  var timer = Date.parse(time)
  const second = Number(((now - timer) / 1000).toFixed(0))
  if (second < 60) {
    return "刚刚"
  }
  const minute = Number((second / 60).toFixed(0))
  if (minute < 60) {
    return minute + '分钟前'
  }
  const hour = Number((minute / 60).toFixed(0))
  if (hour < 24) {
    return hour + '小时前'
  }
  const day = Number((hour / 24).toFixed(0))
  if (day < 31) {
    return day + '天前'
  }
  const mounth = Number((day / 30).toFixed(0))
  if (mounth < 12) {
    return mounth + '月前'
  }
  const year = Number((mounth / 12).toFixed(0))
  return year + '年前'
}
const options = [
  {
    label: "全部",
    value: "全部",
  },
  {
    label: "UnAccepted",
    value: "UnAccepted",
  },
  {
    label: "Accepted",
    value: "Accepted",
  },
  {
    label: "Partial Accepted",
    value: "Partial Accepted",
  },
  {
    label: "System Error",
    value: "System Error",
  },
  {
    label: "Submit Failed",
    value: "Submit Failed",
  },
  {
    label: "Submitting",
    value: "Submitting",
  },
  {
    label: "Judging",
    value: "Judging",
  },
  {
    label: "Compiling",
    value: "Compiling",
  },
]
const currentStatus = ref("全部")
watch(currentStatus, (newV) => {
  const value = wordsToStatus(newV)
  searchParams.status = value
})
const flushData = () => {
  getRaceEvoluation()
}
const getmemory = (val, index) => {
  if (val == null) {
    return "--B"
  }
  if (val < 1024) {
    return val + arr[index]
  }
  index += 1
  val = Number((val / 1024).toFixed(2))
  return getmemory(val, index)
}
const currentSubmitId = ref(0)
const handlerToProblem = (row) => {
  router.push(`/home/racepage/${route.params.rid}/evaluation/${row.submitId}`)
}
</script>

<style lang="less" scoped>
.evo {
  user-select: none;

  .e-header {
    width: 100%;
    height: 10%;

    .e-h-row {
      display: flex;
      justify-content: space-between;

      .e-h-title {
        font-size: 22px;
        font-weight: 600;
        color: #555;

        .iconfont {
          font-weight: normal;
          font-size: 24px;
        }
      }

      .fresh {
        margin: auto 0 auto auto;
        text-align: center;

        .iconfont {
          text-align: center;
        }
      }

      .state {
        margin: auto 0 auto 20px;
      }

      .e-h-search {
        width: 30%;
        display: flex;

        .search {
          width: 40%;
          display: flex;
          margin: auto;

          .search-input {
            width: 100%;
            margin: auto 0 0 0;
          }
        }
      }
    }
  }

  .e-body {
    height: 80%;
    width: 98%;
    margin: 10px auto;

    .table {
      height: 70vh;
    }

    .table-pid {
      &:hover {
        color: rgb(58, 159, 85);
        text-decoration: underline;
        cursor: pointer;
      }
    }
  }

  .e-footer {
    width: 98%;
    display: flex;
    justify-content: center;
    margin: auto 0;
  }
}

.detail {
  background-color: rgb(240, 244, 250);
  padding: 15px 0 30px 0;
  border-radius: 10px;

  .btn {
    width: 120px;
    margin: 10px 1%;
  }
}
</style>
